<template>
    <div>
        <div class="title">
            <span class="iconfont icon-fanhui fanhui"></span>
            <span>我的收藏</span>
        </div>
        <div>
            <div class="collectible">
                <div class="tp"><img src="../assets/image/wq/sp2.png"></div>
                <div class="wz">
                    <p>8H Tree 简约全实木餐厅桌椅</p>
                    <div class="hd">特价</div>
                    <p class="price">
                        <span class="unit">￥</span>
                        <span class="num">699</span>
                    </p>
                </div>
            </div>
        </div>
        <div>
            <div class="collectible">
                <div class="tp"><img src="../assets/image/wq/sp2.png"></div>
                <div class="wz">
                    <p>8H Tree 简约全实木餐厅桌椅</p>
                    <div class="hd">特价</div>
                    <p class="price">
                        <span class="unit">￥</span>
                        <span class="num">699</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    window.onload = window.onresize = function () {
        document.documentElement.style.fontSize = 37.5 * document.documentElement.clientWidth / 375 + 'px';
    };
    export default {
        name: "Collect"
    }
</script>

<style scoped lang="less">
    @baseFont:37.5;
    html{
        padding: 0;
        margin: 0;
        font-size: @baseFont*1px;
    }
    .px2rem(@name,@px){
            @{name}:@px/@baseFont/2*1rem;
    }
    .body {
        background: #f4f4f4;
    }
    .title{
        text-align: center;
        .px2rem(margin-top,10);
        border-bottom: 1px solid black;
        .px2rem(height,80);
        .px2rem(line-height,80)
    }
    .fanhui{
        position: absolute;
        .px2rem(left,20)
    }
    .st{
         clear: both;
     }
    .collectible{
        .px2rem(margin-top,20);
        .px2rem(padding-left,20);
        .px2rem(height,200);
        border-bottom: 1px solid black;
        .tp{
            float: left;
            img{
                .px2rem(width,180);
                .px2rem(height,180);
            }
        }
        .wz{
            float: left;
            .px2rem(margin-left,20);
            .hd{
                background: #d96b6d;
                color: white;
                text-align: center;
                .px2rem(font-size,20);
                .px2rem(width,70);
                .px2rem(height,30);
                .px2rem(line-height,30);
                .px2rem(margin-top,10);
                .px2rem(margin-bottom,40)
            }
            .price{
                color: #d96b6d;
                .unit{
                    .px2rem(font-size,18)
                }
                .num{
                }
            }
        }
    }

</style>
<style src="../assets/font/iconfont.css"></style>